<!-- FAQ -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
  <!-- Title -->
  <div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
    <h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">
      Your questions, answered
    </h2>
    <p class="mt-1 text-gray-600 dark:text-gray-400">
      Answers to the most frequently asked questions.
    </p>
  </div>
  <!-- End Title -->

  <div class="max-w-2xl mx-auto">
    <!-- Accordion -->
    <div class="hs-accordion-group">
      <div
        class="
          hs-accordion hs-accordion-active:bg-gray-100
          rounded-xl
          p-6
          dark:hs-accordion-active:bg-white/[.05]
          active
        "
        id="hs-basic-with-title-and-arrow-stretched-heading-one"
      >
        <button
          class="
            hs-accordion-toggle
            group
            pb-3
            inline-flex
            items-center
            justify-between
            gap-x-3
            w-full
            md:text-lg
            font-semibold
            text-left text-gray-800
            transition
            hover:text-gray-500
            dark:text-gray-200
            dark:hover:text-gray-400
          "
          aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-one"
        >
          Can I cancel at anytime?
          <svg
            class="
              hs-accordion-active:hidden
              block
              w-3
              h-3
              text-gray-600
              group-hover:text-gray-500
              dark:text-gray-400
            "
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
            />
          </svg>
          <svg
            class="
              hs-accordion-active:block
              hidden
              w-3
              h-3
              text-gray-600
              group-hover:text-gray-500
              dark:text-gray-400
            "
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
            />
          </svg>
        </button>
        <div
          id="hs-basic-with-title-and-arrow-stretched-collapse-one"
          class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300"
          aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-one"
        >
          <p class="text-gray-800 dark:text-gray-200">
            Yes, you can cancel anytime no questions are asked while you cancel but we would highly
            appreciate if you will give us some feedback.
          </p>
        </div>
      </div>

      <div
        class="
          hs-accordion hs-accordion-active:bg-gray-100
          rounded-xl
          p-6
          dark:hs-accordion-active:bg-white/[.05]
        "
        id="hs-basic-with-title-and-arrow-stretched-heading-two"
      >
        <button
          class="
            hs-accordion-toggle
            group
            pb-3
            inline-flex
            items-center
            justify-between
            gap-x-3
            w-full
            md:text-lg
            font-semibold
            text-left text-gray-800
            transition
            hover:text-gray-500
            dark:text-gray-200
            dark:hover:text-gray-400
          "
          aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-two"
        >
          My team has credits. How do we use them?
          <svg
            class="
              hs-accordion-active:hidden
              block
              w-3
              h-3
              text-gray-600
              group-hover:text-gray-500
              dark:text-gray-400
            "
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
            />
          </svg>
          <svg
            class="
              hs-accordion-active:block
              hidden
              w-3
              h-3
              text-gray-600
              group-hover:text-gray-500
              dark:text-gray-400
            "
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
            />
          </svg>
        </button>
        <div
          id="hs-basic-with-title-and-arrow-stretched-collapse-two"
          class="
            hs-accordion-content
            hidden
            w-full
            overflow-hidden
            transition-[height]
            duration-300
          "
          aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-two"
        >
          <p class="text-gray-800 dark:text-gray-200">
            Once your team signs up for a subscription plan. This is where we sit down, grab a cup
            of coffee and dial in the details.
          </p>
        </div>
      </div>

      <div
        class="
          hs-accordion hs-accordion-active:bg-gray-100
          rounded-xl
          p-6
          dark:hs-accordion-active:bg-white/[.05]
        "
        id="hs-basic-with-title-and-arrow-stretched-heading-three"
      >
        <button
          class="
            hs-accordion-toggle
            group
            pb-3
            inline-flex
            items-center
            justify-between
            gap-x-3
            w-full
            md:text-lg
            font-semibold
            text-left text-gray-800
            transition
            hover:text-gray-500
            dark:text-gray-200
            dark:hover:text-gray-400
          "
          aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-three"
        >
          How does Preline's pricing work?
          <svg
            class="
              hs-accordion-active:hidden
              block
              w-3
              h-3
              text-gray-600
              group-hover:text-gray-500
              dark:text-gray-400
            "
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
            />
          </svg>
          <svg
            class="
              hs-accordion-active:block
              hidden
              w-3
              h-3
              text-gray-600
              group-hover:text-gray-500
              dark:text-gray-400
            "
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
            />
          </svg>
        </button>
        <div
          id="hs-basic-with-title-and-arrow-stretched-collapse-three"
          class="
            hs-accordion-content
            hidden
            w-full
            overflow-hidden
            transition-[height]
            duration-300
          "
          aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-three"
        >
          <p class="text-gray-800 dark:text-gray-200">
            Our subscriptions are tiered. Understanding the task at hand and ironing out the
            wrinkles is key.
          </p>
        </div>
      </div>

      <div
        class="
          hs-accordion hs-accordion-active:bg-gray-100
          rounded-xl
          p-6
          dark:hs-accordion-active:bg-white/[.05]
        "
        id="hs-basic-with-title-and-arrow-stretched-heading-four"
      >
        <button
          class="
            hs-accordion-toggle
            group
            pb-3
            inline-flex
            items-center
            justify-between
            gap-x-3
            w-full
            md:text-lg
            font-semibold
            text-left text-gray-800
            transition
            hover:text-gray-500
            dark:text-gray-200
            dark:hover:text-gray-400
          "
          aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-four"
        >
          How secure is Preline?
          <svg
            class="
              hs-accordion-active:hidden
              block
              w-3
              h-3
              text-gray-600
              group-hover:text-gray-500
              dark:text-gray-400
            "
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
            />
          </svg>
          <svg
            class="
              hs-accordion-active:block
              hidden
              w-3
              h-3
              text-gray-600
              group-hover:text-gray-500
              dark:text-gray-400
            "
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
            />
          </svg>
        </button>
        <div
          id="hs-basic-with-title-and-arrow-stretched-collapse-four"
          class="
            hs-accordion-content
            hidden
            w-full
            overflow-hidden
            transition-[height]
            duration-300
          "
          aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-four"
        >
          <p class="text-gray-800 dark:text-gray-200">
            Protecting the data you trust to Preline is our first priority. This part is really
            crucial in keeping the project in line to completion.
          </p>
        </div>
      </div>

      <div
        class="
          hs-accordion hs-accordion-active:bg-gray-100
          rounded-xl
          p-6
          dark:hs-accordion-active:bg-white/[.05]
        "
        id="hs-basic-with-title-and-arrow-stretched-heading-five"
      >
        <button
          class="
            hs-accordion-toggle
            group
            pb-3
            inline-flex
            items-center
            justify-between
            gap-x-3
            w-full
            md:text-lg
            font-semibold
            text-left text-gray-800
            transition
            hover:text-gray-500
            dark:text-gray-200
            dark:hover:text-gray-400
          "
          aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-five"
        >
          How do I get access to a theme I purchased?
          <svg
            class="
              hs-accordion-active:hidden
              block
              w-3
              h-3
              text-gray-600
              group-hover:text-gray-500
              dark:text-gray-400
            "
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
            />
          </svg>
          <svg
            class="
              hs-accordion-active:block
              hidden
              w-3
              h-3
              text-gray-600
              group-hover:text-gray-500
              dark:text-gray-400
            "
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
            />
          </svg>
        </button>
        <div
          id="hs-basic-with-title-and-arrow-stretched-collapse-five"
          class="
            hs-accordion-content
            hidden
            w-full
            overflow-hidden
            transition-[height]
            duration-300
          "
          aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-five"
        >
          <p class="text-gray-800 dark:text-gray-200">
            If you lose the link for a theme you purchased, don't panic! We've got you covered. You
            can login to your account, tap your avatar in the upper right corner, and tap Purchases.
            If you didn't create a login or can't remember the information, you can use our handy
            Redownload page, just remember to use the same email you originally made your purchases
            with.
          </p>
        </div>
      </div>

      <div
        class="
          hs-accordion hs-accordion-active:bg-gray-100
          rounded-xl
          p-6
          dark:hs-accordion-active:bg-white/[.05]
        "
        id="hs-basic-with-title-and-arrow-stretched-heading-six"
      >
        <button
          class="
            hs-accordion-toggle
            group
            pb-3
            inline-flex
            items-center
            justify-between
            gap-x-3
            w-full
            md:text-lg
            font-semibold
            text-left text-gray-800
            transition
            hover:text-gray-500
            dark:text-gray-200
            dark:hover:text-gray-400
          "
          aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-six"
        >
          Upgrade License Type
          <svg
            class="
              hs-accordion-active:hidden
              block
              w-3
              h-3
              text-gray-600
              group-hover:text-gray-500
              dark:text-gray-400
            "
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
            />
          </svg>
          <svg
            class="
              hs-accordion-active:block
              hidden
              w-3
              h-3
              text-gray-600
              group-hover:text-gray-500
              dark:text-gray-400
            "
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
            />
          </svg>
        </button>
        <div
          id="hs-basic-with-title-and-arrow-stretched-collapse-six"
          class="
            hs-accordion-content
            hidden
            w-full
            overflow-hidden
            transition-[height]
            duration-300
          "
          aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-six"
        >
          <p class="text-gray-800 dark:text-gray-200">
            There may be times when you need to upgrade your license from the original type you
            purchased and we have a solution that ensures you can apply your original purchase cost
            to the new license purchase.
          </p>
        </div>
      </div>
    </div>
    <!-- End Accordion -->
  </div>
</div>
<!-- End FAQ -->
